<template>
  <div v-if="model" class="editViews">
    <nav-bar style="margin-bottom: 15px"></nav-bar>

    <div class="uploadfile">
      <van-uploader class="uploadeimg" preview-size="100vw" :after-read="afterRead" />
      <edit-banner left="头像" >
        <img :src="model.user_img"  slot="right" alt="" v-if="model.user_img">
        <img src="../assets/timg2.jpg"  slot="right" alt="" v-else>
      </edit-banner>
    </div>

    <edit-banner left="昵称" @bannerClick="show=true">
      <a href="" slot="right">{{model.name}}</a>
    </edit-banner>
    <edit-banner left="账号">
      <a href="" slot="right">{{model.username}}</a>
    </edit-banner>
    <edit-banner left="性别" @bannerClick="gendershow=true">
      <a href="" slot="right">{{model.gender ? '男' : '女'}}</a>
    </edit-banner>

    <edit-banner left="个性签名" @bannerClick="textshow=true"></edit-banner>

    <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmClick" @cancel="content=''">
      <van-field v-model="content" autofocus/>
    </van-dialog>

    <van-dialog v-model="textshow" title="个性签名" show-cancel-button @confirm="textareaClick" @cancel="content=''">
      <van-field v-model="content" type="textarea" autofocus/>
    </van-dialog>

    <van-action-sheet v-model="gendershow" cancel-text="取消" :actions="actions" @select="onSelect"/>

    <back btn-text="返回" @registerSubmit="$router.push('/userinfo')"></back>

  </div>
</template>

<script>
  import NavBar from  '../components/common/Navbar'
  import editBanner from '../components/common/editBanner'
  import Back from  '../components/common/LoginBtn'
  export default {
    data(){
      return {
        model:{},
        show:false,
        textshow:false,
        gendershow:false,
        content:'',
        actions: [
          { name: '男',val:1 },
          { name: '女',val:0 },
        ],

      }
    },
    components:{
      NavBar,
      editBanner,
      Back
    },
    methods:{
      //进入组件调取数据渲染页面
      async selectUser() {
        if(!window.sessionStorage.getItem('token')){
          this.$router.push('/login')
        }
        const res =  await this.$http.get('/user/' + window.sessionStorage.getItem('id'))
        this.model = res.data[0]
      },
      async afterRead(file) {
        const fromdata = new FormData()
        fromdata.append('file',file.file)
        const res =  await this.$http.post('/upload',fromdata)
        this.model.user_img = res.data.url
        this.UserUpdate()
        this.$refs.navbar.NavInit()
      },
      async UserUpdate() {
        const res = await this.$http.post('/update/' + window.sessionStorage.getItem('id'),this.model)
        if(res.data.code == 200){
          this.$msg.fail('修改成功')
        }
      },
      confirmClick() {
        this.model.name =  this.content
        this.UserUpdate()
        this.content = ''
      },
      textareaClick() {
        this.model.user_desc = this.content
        this.UserUpdate()
        this.content = ''
      },
      onSelect(data) {
        this.model.gender = data.val
        this.UserUpdate()
        this.gendershow = false
      },
     },
    created(){
      this.selectUser()
    }
  }
</script>

<style lang="less" scoped>
  .editViews{
    img{
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    a{
      color: #333;
    }
    .uploadfile{
      position: relative;
      overflow: hidden;
      .uploadeimg{
        opacity: 0;
        position: absolute;
      }
    }
  }
</style>
